<!DOCTYPE html>
<html class="loading" lang="en" data-textdirection="ltr">

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimal-ui" />
  <meta name="author" content="PIXINVENT" />
  <title>749便利店管理系統</title>
  <link rel="stylesheet" type="text/css" href="app-assets/css/vendors.css" />
  <link rel="stylesheet" type="text/css" href="app-assets/css/vertical-menu.css" />
  <link rel="stylesheet" type="text/css" href="app-assets/css/bootstrap-extended.css" />
</head>

<body>
  <div class="content-wrapper">
    <div class="content-header">
      <div class="content-header-left mb-2">
        <h3 class="content-header-title mb-0">购物车</h3>
      </div>
    </div>
    <div class="card">
      <div class="card-content">
        <div class="card-body">
          <div class="funcbtn clearfix">
            <div class="pull-left">
              <a class="btn btn-info" href="采购商品.html">继续添加</a>
            </div>
            <div class="pull-right">
              <a class="btn btn-info" href="#" id="createOrder">生成采购单</a>
            </div>
          </div>
          <div class="tablebox1">
            <table class="table">
              <thead>
                <tr>
                  <th>图片</th>
                  <th>商品名称</th>
                  <th>数量</th>
                  <th>采购单价</th>
                  <th>小计</th>
                </tr>
              </thead>
              <tbody id="list"></tbody>
            </table>
          </div>
          <div>总计: <span id="shopListSum" class="total-amount">0.00</span>元</div>
        </div>
      </div>
    </div>
  </div>
</body>

</html>
<script src="app-assets/js/vendors.min.js" type="text/javascript"></script>
  <script src="app-assets/js/app-menu.js" type="text/javascript"></script>
  <script src="app-assets/js/app.js" type="text/javascript"></script>
  <script src="app-assets/js/echarts.min.js" type="text/javascript"></script>
  <script src="app-assets/laydate/laydate.js" type="text/javascript"></script>

  <script type="module">
    import { updateCart ,deleteCart} from "./date/js/cart.js";
    $(function () { 
      getCartList();
    })

    function getCartList() {
      //获取购物车中的数据
      let cart = JSON.parse(localStorage.getItem('cart'));
      //获取购物车商品总计
      // cart.reduce(function (total, item) {
      //   total += item.quantity * item.price;
      //   return total;
      // }, 0);

      //accumulator:累计值  product：数组中当前被处理的元素   0：起始值
      const total = cart.reduce((accumulator, product) => {
        return accumulator + product.quantity * product.purchasePrice;
      }, 0);
      
      $("#shopListSum").html(total.toFixed(2));

      $("#list").empty();
      cart.forEach((product) => {
        let tr =
          `<tr>
              <td><img width='220px' src="http://localhost:25080/` + product.imageUrl + `"></td>
              <td>` + product.productName + `</td>
              <td>
                <div class="input-group">
                  <button class="btn btn-outline-secondary" type="button"
                  onclick=addQuantity(` + product.productId + `)>+</button>
                  <input type="text" value="` + product.quantity + `" />
                  <button class="btn btn-outline-secondary" type="button" 
                  onclick=subtractQuantity(` + product.productId + `)>-</button>
                </div>
              </td>
              <td>` + product.purchasePrice + `</td>
              <td>¥` + (product.quantity * product.purchasePrice).toFixed(2) + `</td>
              <td><button type="button" class="btn btn-danger" onclick='del(` + product.productId + `)'>删除</button></td> 
            </tr>`;
        $("#list").append(tr);
      });
    }
    window.addQuantity = function (productId) {
      updateCart(productId, 'add');
      getCartList();
    }
    window.subtractQuantity = function (productId) {
      updateCart(productId, 'subtract');
      getCartList();
    }
    window.del = function (productId) {
      deleteCart(productId);
      getCartList();
    }
    $('#createOrder').on('click', function () { 
      //取消a链接默认行为
      event.preventDefault();
      //获取购物车数据
      let cart = JSON.parse(localStorage.getItem('cart'));
      if (cart.length > 0) { 
        //遍历购物车数据 获取商品ID 和 数量
        let orderDto= cart.map(item => {
          return {
            productId: item.productId,
            quantity: item.quantity
          }
        });
        console.log('订单数据',orderDto);
        $.ajax({
          type: 'POST',
          url: 'http://localhost:25080/purchaseOrders/createOrder',
          data: JSON.stringify(orderDto),
          contentType: 'application/json',
          dataType: 'json',
          success: function (result) { 
            console.log('生成采购单成功',result);
            if (result.status) { 
              alert('生成采购单成功');
              //清空购物车
              localStorage.removeItem('cart');
              //todo 跳转到采购单页面
              window.location.href = '采购订单.html';
            }
          }
        })
      }else { 
        alert('请添加商品');
      }
    });
  </script>